<template>
  <div class="box">
<!--    {{seven_hot_yuQing_data}}-->
    <div id="seven_hot_yuQing" :style="{width: '250px', height: '250px'}"></div>
  </div>
</template>

<script>
export default {
  name: "seven_hot_yuQing",
  props:{
    seven_hot_yuQing_data:{
      type:Array,
      required:true
    }
  },
  data() {
    return {
    }
  },
  created() {
    // console.log("zi,created,",this.seven_hot_yuQing_data)
  },
  mounted() {
    // console.log("zi,mounted,",this.seven_hot_yuQing_data)
    this.init_today_data_source()

  },
  methods: {

    // 初始化
   async init_today_data_source() {

     // console.log("修改后==",this.seven_hot_yuQing_data)

      let arr1=[]
      let arr2=[]

     for (let i = 0; i < this.seven_hot_yuQing_data.length; i++) {
       arr1.push(this.seven_hot_yuQing_data[i].follower_count)
       arr2.push(this.seven_hot_yuQing_data[i].title)
     }
      // console.log(this.seven_hot_yuQing_data)

      var dom = document.getElementById('seven_hot_yuQing')
      var myChart = this.echarts.init(dom)

     let option = {
        title:{
          show: true,
          text:'七日热点舆情',
          textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 18,
            color:"#DEDCCF"
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          position: 'top',
          axisLine:{
            lineStyle:{
              color:"#fff",
              width:2,
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['消息1', '消息2', '消息3', '消息4', '消息5'],
          axisLine:{
            lineStyle:{
              color:"#fff",
              width:1,
            }
          }
        },
        series: [
          {
            type: 'bar',
            data:  arr1,
            barWidth:15,
            label: {   //设置柱状图上显示  对应值
              show: true,
              position: 'top',
              color:'#fff',
              formatter:function (a){
                for (let i = 0; i <arr1.length; i++) {
                  if (a.value===arr1[i]){
                    return arr2[i]
                  }
                }
              }
              /*formatter:function (a){
                for (let i = 0; i <this.seven_hot_yuQing_data.length; i++) {
                  if (a.value===this.seven_hot_yuQing_data[i].follower_count){
                    return this.seven_hot_yuQing_data[i].title
                  }
                }
                console.log(a)
              }*/
            },
            itemStyle: {
              normal: {
                color: function(params) {   // 设置前三个颜色不一样
                  var num = params.value;
                  var djg = params.dataIndex;   //第几个数
                  var retcoler = "#345edc";
                  if(djg>9){
                    retcoler = '#ef6b59';
                  }
                  return retcoler
                },
                barBorderRadius: [0, 8, 8, 0] // 设置柱状图圆角（顺时针左上，右上，右下，左下）
              },

            },
          },
        ]
      };

      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
